<template>
  <div class="register">
    <div class="register-wrap">
      <h1 class="title">注册</h1>
      <el-form :model="form" ref="form" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input
            placeholder="请输入用户名"
            type="username"
            v-model="form.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item id="password" prop="pass">
          <el-input
            placeholder="请输入密码"
            type="password"
            autocomplete="off"
            v-model="form.password1"
            @keyup.enter.native="login"
          ></el-input>
        </el-form-item>
        <el-form-item id="password" prop="pass">
          <el-input
            placeholder="请确认密码"
            type="password"
            autocomplete="off"
            v-model="form.password2"
            @keyup.enter.native="login"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="register-btn" @click="login"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
      <div class="register-text">
        <div class="backHome" @click="goHome">返回主页</div>
        <div @click="gotoLogin" class="gotologin">已有账号，直接登录</div>
      </div>
    </div>
  </div>
</template>

<style src="../assets/css/Register.css" scoped >
</style>

<script>
export default {
  name: "Register",
  data() {
    return {
      form: {
        username: "",
        password1: "",
        password2: "",
      },
    };
  },
  methods: {
    gotoLogin() {
      this.$router.push("/login");
    },
    goHome() {
      this.$router.push("/");
    },
  },
};
</script>